/**
 * @name 复选框
 * @description 复选框组件是一种用户界面组件，用于允许用户选择一个或多个选项。
 */
import { FC, memo, PropsWithChildren, useMemo } from 'react'
import styles from './index.module.less'
import { View, Image } from '@tarojs/components'
import classNames from 'classnames'
import normal from './images/normal.png'
import normal_acitve from './images/normal_acitve.png'
import normal_disabled from './images/normal_disabled.png'
import custom from './images/custom.png'
import custom_active from './images/custom_active.png'
import { IComponentProps } from '../types'

export interface ICheckboxProps extends IComponentProps {
  /**
   * 是否选中值
   */
  value: boolean

  /**
   * 多选框大小
   * @default 22
   */
  size?: number

  /**
   * 是否禁用
   */
  disabled?: boolean

  /**
   * 类型
   * 如果你的组件库需要扩展样式。可以通过这个字段自行扩展样式
   *
   * @default default
   */
  type?: ECheckType | keyof typeof ECheckType

  /**
   * 选中变化事件
   * @param value
   */
  onChange?(value: boolean): void
}

enum ECheckType {
  Default = 'Default',
  Custom = 'Custom'
}

const Component: FC<PropsWithChildren<ICheckboxProps>> = (props) => {
  const { value = false, size = 16, type = ECheckType.Default, disabled = false } = props

  const imgIcon = useMemo(() => {
    if (type === ECheckType.Custom) {
      return value ? custom_active : disabled ? custom : custom
    }

    return value ? normal_acitve : disabled ? normal_disabled : normal
  }, [value, disabled, type])

  return (
    <View
      className={classNames(styles.checkboxStyle, props.className)}
      style={props.style}
      onClick={() => {
        !disabled && props.onChange?.(!value)
      }}
    >
      <View className={styles.checkboxStyle_box}>
        <Image src={imgIcon} style={{ width: size, height: size }} />
      </View>

      <View className={styles.checkboxStyle_content}>{props.children}</View>
    </View>
  )
}

Component.displayName = 'MMCheckbox'

const MMCheckbox = memo(Component)
export default MMCheckbox
